<template>
  <el-dialog v-model="dialogVisible" title="查看详情">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" :label-width="90">
      <el-form-item label="姓名">
        <el-input :disabled="true" v-model="formInline.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="性别">
        <el-select
          :disabled="true"
          v-model="formInline.sexStr"
          placeholder="请选择性别"
          size="large"
        >
          <el-option
            :disabled="true"
            v-for="item in sexOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input :disabled="true" v-model="formInline.age" placeholder="请输入年龄" clearable />
      </el-form-item>
      <el-form-item label="出生年月">
        <el-date-picker
          :disabled="true"
          v-model="formInline.birth"
          type="date"
          placeholder="请输入出生年月"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="婚姻状况">
        <el-select :disabled="true" v-model="formInline.marriageStr" placeholder="请选择婚姻状况">
          <el-option
            v-for="item in marriageOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="民族">
        <el-input
          :disabled="true"
          v-model="formInline.nationStr"
          placeholder="请输入民族"
          clearable
        />
      </el-form-item>
      <el-form-item label="身份证号码">
        <el-input
          :disabled="true"
          v-model="formInline.userId"
          placeholder="请输入身份证号码"
          clearable
        />
      </el-form-item>
      <el-form-item label="邮箱地址">
        <el-input
          :disabled="true"
          v-model="formInline.email"
          placeholder="请输入邮箱地址"
          clearable
        />
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input
          :disabled="true"
          v-model="formInline.phoneNumber"
          placeholder="请输入联系方式"
          clearable
        />
      </el-form-item>
      <el-form-item label="部门">
        <el-cascader
          :disabled="true"
          ref="cascaderRef"
          :show-all-levels="false"
          v-model="formInline.depId"
          :options="caserData"
          :placeholder="'请选择部门'"
          :props="cascaderProps"
        />
      </el-form-item>
      <el-form-item label="岗位">
        <el-select v-model="formInline.partId" :disabled="true" placeholder="请选择岗位">
          <el-option
            v-for="item in partOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="show" v-show="showBtns">
      <el-button @click="rejectJoin">驳 回</el-button>
      <el-button type="primary" @click="joinOffer">入 职</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { computed, ref, onMounted } from 'vue';
import {
  getStaffDetailReq,
  handleFormSubmissionReq,
  getStaffFormDetailReq,
} from '@/api/staffManage';
import { getDepList, getPositionById } from '@/api/depManage';
import { _msgBox } from '@/utils/msg';

const emit = defineEmits(['update:detailShow', 'reject', 'joinOffer']);
const prop = defineProps({
  showBtns: {
    type: Boolean,
    default: true,
  },
  curRow: {
    type: Object,
    default: () => {},
  },
  detailShow: {
    type: Boolean,
    default: false,
  },
});

const dialogVisible = computed({
  get() {
    return prop.detailShow;
  },
  set(v) {
    emit('update:detailShow', v);
  },
});
const cascaderProps = {
  emitPath: false,
  checkStrictly: true,
};
const marriageOptions = [
  {
    label: '未婚',
    value: '0',
  },
  {
    label: '已婚',
    value: '1',
  },
];

const sexOptions = [
  {
    label: '男',
    value: '0',
  },
  {
    label: '女',
    value: '1',
  },
];

const formInline = ref({
  name: '',
  sexStr: '',
  age: '',
  birth: '',
  marriageStr: '',
  nationStr: '',
  userId: '',
  phoneNumber: '',
  depId: '',
  partId: '',
  email: '',
});

const getStaffDetail = async () => {
  let par = {
    urlId: prop.curRow.id,
  };
  const res = await getStaffFormDetailReq(par);
  if (res && res.code == 200) {
    formInline.value = res.data;
  } else {
    par = {
      empId: prop.curRow.employeeId,
    };
    console.log('emppar', par);
    const result = await getStaffDetailReq(par);
    formInline.value = result.data;
  }
};

const caserData = ref([]);
const getDeps = async () => {
  const res = await getDepList();
  if (res && res.code == 200) {
    caserData.value = res.data;
  }
};

const partOptions = ref([]);
const getPartbyId = async () => {
  let par = {
    departmentId: formInline.value.depId,
    currentPage: 1,
    pageSize: -1,
  };
  const res = await getPositionById(par);
  if (res && res.code == 200) {
    partOptions.value = res.data.list.map((item) => {
      return {
        label: item.positionName,
        value: item.positionId,
      };
    });
  }
};

// 入职
const joinOffer = async () => {
  console.log(prop.curRow);
  let par = {
    formId: formInline.value.id,
    handleMethod: 'agree',
  };
  const res = await handleFormSubmissionReq(par);
  if (res && res.code == 200) {
    _msgBox('入职成功！', 'success');
    dialogVisible.value = false;

    emit('joinOffer', curRow);
  }
};

// 驳回
const rejectJoin = async () => {
  let par = {
    formId: formInline.value.id,
    handleMethod: 'reject',
  };
  const res = await handleFormSubmissionReq(par);
  if (res && res.code == 200) {
    _msgBox('驳回成功！', 'success');
    emit('reject', curRow);
  }
  dialogVisible.value = false;
};

onMounted(async () => {
  await getStaffDetail();
  getDeps();
  getPartbyId();
});
</script>

<style scoped lang="less"></style>
